<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./../jquery-3.3.1.min.js"></script>
    <style>
        .left-box {
            /* float: left; */
            margin-right: 500px;
        }

        .right-box {
            /* float: right; */
            position: fixed;
            right: 0;
            top: 0;
        }

        #TOC {
            border: solid black 1px;
            /* margin: 10px; */
            /* padding: 10px; */
        }

        .activeCataloge {
            background-color: aquamarine;
        }

        .TOCEntry {
            font-family: sans-serif;
        }

        .TOCEntry a {
            text-decoration: none;
        }

        .TOCLevel1 {
            font-size: 16pt;
            font-weight: bold;
        }

        .TOCLevel2 {
            font-size: 12pt;
            margin-left: .5in;
        }

        .TOCLevel3 {
            font-size: 12pt;
            margin-left: 1in;
        }

        .TOCLevel4 {
            font-size: 12pt;
            margin-left: 1.5in;
        }

        .TOCLevel5 {
            font-size: 12pt;
            margin-left: 2in;
        }

        .TOCLevel6 {
            font-size: 12pt;
            margin-left: 2.5in;
        }

        .TOCSectNum:after {
            content: ": ";
        }
    </style>

</head>

<body>
    <div class="left-box">
        <h1>h1</h1>
        <p>H1内容：新华社北京7月10日电（记者郁琼源）国家统计局副局长贾楠10日表示，2018年我国将开展第四次全国经济普查，以摸清我国最新家底和国力。 　　国务院新闻办公室10日举行吹风会介绍修改《全国经济普查条例》有关情况。贾楠在会上介绍，第四次全国经济普查是把握经济发展新变化和新特征，推动我国经济高质量发展的客观需要，也是贯彻落实中央关于统计工作重大决策部署、提高统计数据真实性的有效途径，更是推动依法普查依法治统、提升统计能力的重大实践。
            　　贾楠说，通过普查，完善覆盖国民经济各行业的基本单位名录库以及部门共建共享、持续维护更新的机制，进一步夯实统计基础，推进国民经济核算改革，推动加快构建现代统计调查体系，为加强和完善宏观调控、深化供给侧结构性改革、科学制定中长期发展规划、推进国家治理体系和治理能力现代化提供科学准确的统计信息支持。
            　　经济普查是一项重大的国情国力调查，与人口普查、农业普查组成三大周期性全国普查项目。据贾楠介绍，迄今为止，我国已开展了三次全国经济普查。普查目的是全面调查我国第二产业和第三产业的发展规模、布局和效益，了解产业组织、产业结构、产业技术、产业形态的现状以及各生产要素的构成，摸清全部法人单位资产负债状况和新兴产业发展情况，进一步查实各类单位的基本情况和主要产品产量、服务活动，全面反映供给侧结构性改革、新动能培育壮大、经济结构优化升级等方面的新进展。

        </p>
        <h2>h2</h2>
        <p>H2内容： 　　贾楠说，通过普查，完善覆盖国民经济各行业的基本单位名录库以及部门共建共享、持续维护更新的机制，进一步夯实统计基础，推进国民经济核算改革，推动加快构建现代统计调查体系，为加强和完善宏观调控、深化供给侧结构性改革、科学制定中长期发展规划、推进国家治理体系和治理能力现代化提供科学准确的统计信息支持。
            　　经济普查是一项重大的国情国力调查，与人口普查、农业普查组成三大周期性全国普查项目。据贾楠介绍，迄今为止，我国已开展了三次全国经济普查。普查目的是全面调查我国第二产业和第三产业的发展规模、布局和效益，了解产业组织、产业结构、产业技术、产业形态的现状以及各生产要素的构成，摸清全部法人单位资产负债状况和新兴产业发展情况，进一步查实各类单位的基本情况和主要产品产量、服务活动，全面反映供给侧结构性改革、新动能培育壮大、经济结构优化升级等方面的新进展。

        </p>
        <h3>H3</h3>
        <h4>H4</h4>
        <p>H4内容： 　　贾楠说，通过普查，完善覆盖国民经济各行业的基本单位名录库以及部门共建共享、持续维护更新的机制，进一步夯实统计基础，推进国民经济核算改革，推动加快构建现代统计调查体系，为加强和完善宏观调控、深化供给侧结构性改革、科学制定中长期发展规划、推进国家治理体系和治理能力现代化提供科学准确的统计信息支持。
            　　经济普查是一项重大的国情国力调查，与人口普查、农业普查组成三大周期性全国普查项目。据贾楠介绍，迄今为止，我国已开展了三次全国经济普查。普查目的是全面调查我国第二产业和第三产业的发展规模、布局和效益，了解产业组织、产业结构、产业技术、产业形态的现状以及各生产要素的构成，摸清全部法人单位资产负债状况和新兴产业发展情况，进一步查实各类单位的基本情况和主要产品产量、服务活动，全面反映供给侧结构性改革、新动能培育壮大、经济结构优化升级等方面的新进展。

        </p>
        <h5>H5</h5>
        <h6>H6</h6>
        <h1>h1</h1>
        <h2>h2</h2>
        <h2>h2</h2>
        <h1>h1</h1>
        <h1>h1</h1>
        <p>H1内容： 　　贾楠说，通过普查，完善覆盖国民经济各行业的基本单位名录库以及部门共建共享、持续维护更新的机制，进一步夯实统计基础，推进国民经济核算改革，推动加快构建现代统计调查体系，为加强和完善宏观调控、深化供给侧结构性改革、科学制定中长期发展规划、推进国家治理体系和治理能力现代化提供科学准确的统计信息支持。
            　　经济普查是一项重大的国情国力调查，与人口普查、农业普查组成三大周期性全国普查项目。据贾楠介绍，迄今为止，我国已开展了三次全国经济普查。普查目的是全面调查我国第二产业和第三产业的发展规模、布局和效益，了解产业组织、产业结构、产业技术、产业形态的现状以及各生产要素的构成，摸清全部法人单位资产负债状况和新兴产业发展情况，进一步查实各类单位的基本情况和主要产品产量、服务活动，全面反映供给侧结构性改革、新动能培育壮大、经济结构优化升级等方面的新进展。

        </p>
        <h2>h2</h2>
        <h2>h2</h2>
        <h1>h1</h1>
        <h2>h2</h2>
        <p>H2内容： 　　贾楠说，通过普查，完善覆盖国民经济各行业的基本单位名录库以及部门共建共享、持续维护更新的机制，进一步夯实统计基础，推进国民经济核算改革，推动加快构建现代统计调查体系，为加强和完善宏观调控、深化供给侧结构性改革、科学制定中长期发展规划、推进国家治理体系和治理能力现代化提供科学准确的统计信息支持。
            　　经济普查是一项重大的国情国力调查，与人口普查、农业普查组成三大周期性全国普查项目。据贾楠介绍，迄今为止，我国已开展了三次全国经济普查。普查目的是全面调查我国第二产业和第三产业的发展规模、布局和效益，了解产业组织、产业结构、产业技术、产业形态的现状以及各生产要素的构成，摸清全部法人单位资产负债状况和新兴产业发展情况，进一步查实各类单位的基本情况和主要产品产量、服务活动，全面反映供给侧结构性改革、新动能培育壮大、经济结构优化升级等方面的新进展。

        </p>
        <!-- <h2>h2</h2>
            <h3>H3</h3>
            <h4>H4</h4>
            <h3>H3</h3> -->
    </div>
    <div id="TOC" class="right-box">
    </div>
    <script>
        /**
         * toc.js : 根据文档内容生成table
         *
         *    本模块注册一个当文档加载完成后会自动运行的匿名函数。
         *    改函数运行时首先查看文档中id为TOC的元素，如果没有找到
         *    则在文档开头创建它
         *
         *    接下来，函数寻找文档中所有的<h1>到<h6>标签，并将其当做章节标题，
         *    然后以此为内容在TOC元素中创建一个table。该函数为每一个章节标题编号
         *    并且为每一个h标签添加命名的描点，这样就可以通过点击TOC中table连接到对应章节。
         *    生成的锚点一TOC作为前缀，所以你应该在自己的HTML代码中避免使用这个前缀
         *
         *    生成的目录入口可以用css进行格式。所有的入口具有类标识"TOCEntry"，入口同时根据<h>
         *    的级别拥有对应的类标志，如<h1>对应类标识为"TOCLevel1",<h2>对应类标志为"TOCLevel2"。
         *    插入到头部的章节编号具有类标志"TOCSectNum"
         *
         *    你可以在本模块中使用如下样式表
         *    #TOC { border: solid black 1px; margin: 10px; padding: 10px; }
         *    .TOCEntry { font-family: sans-serif; }
         *    .TOCEntry a { text-decoration: none; }
         *    .TOCLevel1 { font-size: 16pt; font-weight: bold; }
         *    .TOCLevel2 { font-size: 12pt; margin-left: .5in; }
         *    .TOCSecNum:after { content: ": "; }   
         *    
         */

        // Find all section heading elements
        var headings;
        if (document.querySelectorAll) // Can we do it the easy way?
            headings = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
        else // Otherwise, find the headings the hard way
            headings = findHeadings(document.body, []);
        // Recursively traverse the document body looking for headings
        function findHeadings(root, sects) {
            for (var c = root.firstChild; c != null; c = c.nextSibling) {
                if (c.nodeType !== 1) continue;
                if (c.tagName.length == 2 && c.tagName.charAt(0) == "H")
                    sects.push(c);
                else
                    findHeadings(c, sects);
            }
            return sects;
        }

        function toc() {
            // Find the TOC container element.
            // If there isn't one, create one at the start of the document.
            var toc = document.getElementById("TOC");
            if (!toc) {
                toc = document.createElement("div");
                toc.id = "TOC";
                document.body.insertBefore(toc, document.body.firstChild);
            }

            // Initialize an array that keeps track of section numbers.
            var sectionNumbers = [0, 0, 0, 0, 0, 0];
            // Now loop through the section header elements we found.
            for (var h = 0; h < headings.length; h++) {
                var heading = headings[h];
                console.log(heading.parentNode)
                // Skip the section heading if it is inside the TOC container.
                if (heading.parentNode == toc) continue;
                // Figure out what level heading it is.
                var level = parseInt(heading.tagName.charAt(1));
                console.log(level)
                if (isNaN(level) || level < 1 || level > 6) continue;
                // Increment the section number for this heading level
                // and reset all lower heading level numbers to zero.
                sectionNumbers[level - 1]++;
                for (var i = level; i < 6; i++) sectionNumbers[i] = 0;
                // Now combine section numbers for all heading levels
                // to produce a section number like 2.3.1.
                var sectionNumber = sectionNumbers.slice(0, level).join(".")
                // Add the section number to the section header title.
                // We place the number in a <span> to make it styleable.
                var span = document.createElement("span");
                span.className = "TOCSectNum";
                span.innerHTML = sectionNumber;
                heading.insertBefore(span, heading.firstChild);
                // Wrap the heading in a named anchor so we can link to it.
                var anchor = document.createElement("a");
                anchor.name = "TOC" + sectionNumber;
                heading.parentNode.insertBefore(anchor, heading);
                anchor.appendChild(heading);
                // Now create a link to this section.
                var link = document.createElement("a");
                link.href = "#TOC" + sectionNumber; // Link destination
                // link.className =    
                link.innerHTML = heading.innerHTML; // Link text is same as heading

                // Place the link in a div that is styleable based on the level.
                var entry = document.createElement("div");
                entry.className = "TOCEntry TOCLevel" + level + " #TOC" + sectionNumber;
                entry.appendChild(link);
                // And add the div to the TOC container.
                toc.appendChild(entry);
                if (sectionNumber.indexOf('.') == -1) {
                    var text1 = document.createElement("span")
                    text1.innerText = '·'
                    entry.insertBefore(text1, link);
                }
            }
        }

        window.onload = function () {
            toc();
            window.onscroll = function () {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度
                // console.log('scrollTop:' + scrollTop);
                // headings.forEach(element => {
                //     console.log(element)
                // });
                var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
                // console.log('clientHeight:' + clientHeight)
                // console.log('offsetTop:' + element.offsetTop)
                for (let index = 0; index < headings.length; index++) {
                    const element = headings[index];

                    if (element.offsetTop - scrollTop <= 10) {
                        // if (index == 0) {
                        var _activedom = document.getElementsByClassName('#' + element.parentNode.name)[0];

                        // console.log(_activedom)
                        // console.log(_activedom.className)
                        // _activedom.className += ' activeCataloge'
                        $(_activedom).siblings().removeClass('activeCataloge')
                        $(_activedom).addClass('activeCataloge')
                        // }
                    }
                }
            }
        };
    </script>
</body>

</html>